import { func } from 'assert-plus';
import React, { Component } from 'react';

import './index.css';

const MyContext = React.createContext();
const { Provider, Consumer } = MyContext;

class A extends Component {
    state = { username: 'tom', age: 18 };

    render() {
        const { username, age } = this.state;

        return (
            <div className="parent">
                <h3>我是A组件</h3>
                <h4>我的用户名是：{username}</h4>
                <Provider value={{ username, age }}>
                    <B />
                </Provider>
            </div>
        );
    }
}

class B extends Component {
    render() {
        return (
            <div className="child">
                <h3>我是B组件</h3>
                <C />
            </div>
        );
    }
}

class C extends Component {
    // 声明接收context
    static contextType = MyContext;
    render() {
        console.log(this.context);
        const { username, age } = this.context;
        return (
            <div className="grand">
                <h3>我是C组件</h3>
                <h4>我从A接收到的用户名是：{username}</h4>
                <h4>我从A接收到的年龄是：{age}</h4>
                <Consumer>
                    {
                        value => `函数式组件<Consumer>${value.username}，年龄是${value.age}`
                    }
                </Consumer>
            </div>
        );
    }
}


function D() {


}


export default A;
